/**title:头像信息部分 * @Description: * @author: Guitu */
<template>
	<view class="userInfo">
		<!-- 背景图片 -->
		<u-image class="bgImg" width="100%" height="100%" :src="src"></u-image>
		
		<view class="userInfoContent">
			<!-- 个人头像 -->
			<view class="avatar-left">
				<avatar :info="member.pic"></avatar>
			</view>
			
			<!-- 个人信息 -->
			<view class="avatar-right">
				<!-- 昵称 -->
				<nick-name class="avatar-right-item" :info="member"></nick-name>
				
				<!-- 电话 -->
				<phone class="avatar-right-item" :info="member"></phone>
				
				<!-- 工号 -->
				<my-mnum class="avatar-right-item" :info="member"></my-mnum>
				
				<!-- 联系人 -->
				<my-contact class="avatar-right-item" :info="member"></my-contact>
				
				<!-- 地址 -->
				<my-address class="avatar-right-item" :info="member"></my-address>
				
			</view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/apiList/user/user.js';

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('userModule');

import avatar from "./components/avatar.vue"
import nickName from './components/nickName.vue'
import phone from './components/phone.vue'
import myMnum from './components/myMnum.vue'
import myContact from './components/myContact.vue'
import myAddress from './components/myAddress.vue'

export default {
	components:{
		avatar,
		nickName,
		phone,
		myMnum,
		myContact,
		myAddress
	},
	computed: {
		...mapState(['member'])
	},
	data() {
		return {
			src: require('@/static/user/bgpic.png')//背景图片
		};
	},
	methods: {
		
	}
};
</script>

<style lang="scss" scoped>
.userInfo {
	width: 100%;
	height: 350rpx;
	position: relative;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
	
	// 背景图片
	.bgImg{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
	}
	
	// 用户信息内容
	.userInfoContent{
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		display: flex;
		/* 左边头像*/
		.avatar-left {
			width: 30%;
			padding: 20rpx 22rpx 20rpx 40rpx;
		}
		
		/* 右边个人信息 */
		.avatar-right {
			flex: 1;
			padding: 15rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}
}
</style>
